<!--
 * new page
 * @author: zhuangming
 * @since: 2025-03-04
 * detail.vue
-->
<template>
  <view class="container">
    <view class="detail-content">
      <view class="detail-title">
        {{ detailData.name }}
      </view>
      <view style="display: flex; align-items: center; justify-content: space-between">
        <view style="display: flex; flex-direction: column; align-items: flex-start">
          <!-- <span style="font-size: 20rpx; background-color: rgba(255, 220, 220, 0.6); color: #FA642F; border: 1rpx solid #FA642F; padding: 1px; margin: 10px 0">{{ detailData.illustrate }}</span> -->
          <span style="font-size: 28rpx">活动时间： {{ detailData.startTime }} 至 {{ detailData.endTime }}</span>
        </view>
        <view v-if="detailData.merPhone" @click="makeCall">
          <image style="width: 60rpx; height: 60rpx" src="../../../static/local_life/phone.png"> </image>
          <view style="font-size: 28rpx"> 电话 </view>
        </view>
      </view>
      <van-divider />
      <lifeInfo :infoType="2" :infoData="detailData" />
    </view>

    <!-- <tabActive class="product-con" :activeData="activeData" :businessId="id" /> -->
    <tabDetail :detailImg="detailData.showInfo || ''" />
    <view style="padding-bottom: 100px"> </view>
    <view
      v-if="activeList && activeList.length && seeButton"
      style="position: fixed; bottom: 0; width: 100%; left: 0; height: 82px; background-color: #fff; display: flex; align-items: center"
    >
      <button
        @click="onGrab"
        :loading="loading"
        style="background-color: #fa642f; width: 90%; height: 40px; border-radius: 10px; color: white; border-radius: 20px; display: flex; align-items: center; justify-content: center"
      >
        立即抢购
      </button>
    </view>
    <subOrder ref="subOrder" :subOrderData="subOrderData" :ebMerActivityTicketId="checked" :ebMerActivityId="activeId" />
  </view>
</template>

<script>
import { getMerInfoByid, clickActivityInfoByid, selectTicketById, appraiseList } from "../../utils/api/local.js";
import { getUserInfo } from "../../utils/request_api.js"; /* 登录界面挪动接口 */
import TabSay from "../index/components/tabSay.vue";
import tabDetail from "../index/components/tabDetail.vue";
import tabActive from "../index/components/tabActive.vue";
import subOrder from "../index/components/subOrder.vue";
import lifeInfo from "./components/list_info.vue";
import { IMG_URL } from "../../config/index";
export default {
  components: {
    TabSay,
    tabDetail,
    tabActive,
    subOrder,
    lifeInfo,
  },
  data() {
    return {
      list1: "",
      userInfo: "",
      imgurl: IMG_URL,
      tabs: "",
      id: "",
      detailData: {},
      activeData: [],
      checked: 1,
      activeList: [],
      /** 商户id */
      businessId: "",
      loading: false,
      /** 提交订单页面信息 */
      subOrderData: {},
      /** 活动id */
      activeId: "",
      /** 评价列表 */
      praiseList: [],
      params: {
        limit: 5,
        page: 1,
      },
      /** 数据是否加载完全 */
      hasMore: true,
      /** type为1表示进入店铺 */
      type: 0,
      seeButton: "",
    };
  },
  onLoad(option) {
    this.seeButton = this.$globalData.seeButton;
    this.businessId = option.businessId;
    this.activeId = option.id;
    this.isLaundry = option.isLaundry;
    this.type = option.type || 0;
    // this.getDetail(option.id);
    this.getMerInfoByidd(this.businessId, option.id);
    this.clickActivityInfoByid(option.id);
    this.appraiseList();
  },
  onShow() {
    this.userInfo = uni.getStorageSync("userInfo");
  },
  methods: {
    //点击电话按钮
    makeCall() {
      uni.makePhoneCall({
        phoneNumber: this.detailData.merPhone,
      });
    },

    //点击tab切换
    onchangetab(e) {
      this.tabs = e.name;
    } /** 评价列表 */,
    appraiseList() {
      /** 数据加载完成不再请求 */
      if (!this.hasMore) {
        return false;
      }
      appraiseList({
        activityId: this.activeId,
        limit: this.params.limit,
        page: this.params.page,
      }).then((res) => {
        this.hasMore = (res.data.list || []).length >= this.params.page;
        this.praiseList = this.praiseList.concat(res.data.list || []);
        this.params.page += 1;
      });
    },
    handleDetail(id) {
      uni.navigateTo({
        url: "/pages_h5/local_life/detailIndexLogin?id=" + id + "&activeId=" + this.activeId + "&infoType=" + this.type,
      });
    },
    clickActivityInfoByid(id) {
      clickActivityInfoByid({
        id,
      }).then((res) => {
        this.activeList = res.data || [];
        this.list1 = this.activeList && this.activeList.length > 0 ? [{ name: "活动" }, { name: "详情" }, { name: "评价" }] : [{ name: "详情" }, { name: "活动" }, { name: "评价" }];
        this.tabs = this.list1[0].name;
        /** 默认选中第一个 */
        if (res.data && res.data.length > 0) {
          this.checked = res.data[0].id;
        }
      });
    },
    getMerInfoByidd(businessId, id) {
      getMerInfoByid({ id: businessId, isDefMerActive: this.type }).then((res) => {
        this.detailData = {};
        (res.data.activityList || []).forEach((item, key) => {
          if (item.id == id) {
            this.detailData = {
              ...item,
              categoryName: res.data.categoryName,
              merAvatar: res.data.ebMer.merAvatar,
              merName: res.data.ebMer.merName,
              merAddress: res.data.ebMer.merAddress,
              serviceScore: res.data.ebMer.serviceScore,
              //   defMerActiveId: res.data.ebMer.defMerActiveId, //传递默认活动id
              //   businessId: res.data.ebMer.id, //传递商户id
              merBanner: item.icon,
            };
          }
        });
      });
    },
    /** 立即抢购 */
    async onGrab() {
      var e = await getUserInfo();
      if (e.code == 401) {
        uni.showModal({
          title: "提示",
          content: "您的登录已过期或未登录，请重新登录。",
          success: (res) => {
            if (res.confirm) {
              uni.clearStorage();
              uni.setStorageSync("ebMerId", this.ebMerId);
              uni.setStorageSync("userType", this.userType);
              uni.switchTab({
                url: "/pages_h5/myCenter/index?merId=" + this.ebMerId, // 假设登录页面的路径为 /pages_h5/login/index
              });
            }
          },
        });
        return;
      }
      this.loading = true;
      selectTicketById({ id: this.checked }).then((res) => {
        this.loading = false;
        this.subOrderData = res.data || {};
        this.subOrderData.activeName = this.detailData.name;
        this.subOrderData.merAvatar = this.detailData.merAvatar;
        this.subOrderData.isLaundry = this.isLaundry;
        // uni.navigateTo({
        //   url: "/pages_h5/index/components/subOrderNo?subOrderData=" + JSON.stringify(this.subOrderData) + "&ebMerActivityTicketId=" + this.checked + "&ebMerActivityId=" + this.activeId + "&businessId=" + this.businessId+"&type="+this.type,
        // });
        this.$refs.subOrder.handleOpen(this.checked);
      });
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  position: relative;
}

.detail-header {
  height: 500rpx;
  width: 100%;
  z-index: -1;
}

.detail-content {
  padding: 15px;
  border-radius: 12px;
  background-color: #fff;
  width: 85%;
  margin: 0 auto;
  z-index: 10;
  position: relative;
  margin-top: 20rpx;

  /* 添加 position 属性 */
}
</style>
